<!DOCTYPE html><!--商品分类管理页面-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head th:replace="common/amazingHeader2::amazing_header('商品分类管理')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="x-nav">

</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="根分类名" name="cateName" id="cateName"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" type="button" onclick="addRootCate()"><i class="layui-icon"></i>增加
                            </button>
                        </div>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                           onclick="location.reload()" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
                        </a>
                    </form>
                    <hr>
                    <blockquote class="layui-elem-quote">
                        为了保证安全 仅对没有子节点的类别提供删除操作 且最多支持3级菜单
                    </blockquote>
                </div>
                <div class="layui-card-body ">
                    <form>
                        <table class="layui-table layui-form">
                            <thead>
                            <tr>
                                <th width="10%">类别ID</th>
                                <th width="20%">类名</th>
                                <th width="10%">展开下级</th>
                                <th width="10%">查看商品</th>
                                <th width="10%">编辑</th>
                                <th width="10%">添加</th>
                                <th width="10px">删除</th>
                            </tr>
                            </thead>
                            <tbody class="x-cate" id="tbody">

                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'element'], function () {
        const form = layui.form;

        //表格中追加数据
        function table() {
            $.ajax({
                type: "GET",
                url: "cate/listCate",
                beforeSend: function () {
                    loading = layer.msg('加载中', {icon: 16});
                },
                success: function (result) {
                    layer.close(loading);
                    const arr = result.data;
                    let tbody = $("#tbody");
                    appendTo(tbody, arr, 1)
                }
            });
        }

        table();
    });

    /**
     * 添加 查询到的行
     * @param body 要添加到的地方
     * @param arr 要添加的数据
     * @param method 1：append 其他：after
     */
    function appendTo(body, arr, method) {
        for (let i = 0; i < arr.length; i++) {
            let tr = $("<tr id='tr" + arr[i].id + "'></tr>");
            tr.append("<td>" + arr[i].id + "</td>");
            if (arr[i].level === 1) {
                tr.append("<td><i class='layui-icon x-show' status='true'>&#xe623;</i>" + arr[i].name + "</td>");
            } else if (arr[i].level === 2) {
                tr.append("<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='layui-icon x-show' status='true'>&#xe623;</i>" + arr[i].name + "</td>");
            } else {
                tr.append("<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                    "├" + arr[i].name + "</td>")
            }
            if (arr[i].level === 3) {
                tr.append("<td></td>")
            } else {
                tr.append("<td><a class='layui-btn layui-btn-warm layui-btn-xs' onclick='findMore(" + arr[i].id + ")' id='a" + arr[i].id + "'>展开</a> </td>");
            }

            if (arr[i].isLeaf === 1) {
                tr.append("<td><a class='layui-btn' onclick=\"xadmin.open('商品管理','listPro?id=" + arr[i].id + "')\">查看</a></td>")
            } else {
                tr.append("<td></td>")
            }
//xadmin.add_tab(\"商品管理\",\"listPro?cid="+ arr[i].id +"\")
            tr.append("<td class=\"td-manage\">\n" +
                "<a class=\"layui-btn layui-btn layui-btn-xs\"\n" +
                "onclick=\"xadmin.open('编辑','manageChangeCateName?id="+ arr[i].id +"')\"><i\n" +
                "class=\"layui-icon\">&#xe642;</i>编辑\n" +
                "</a></td>");
            if (arr[i].level === 3) {
                tr.append("<td><a class=\"layui-btn layui-btn-warm layui-btn-xs\"\n" +
                    "onclick=\"xadmin.open('编辑','productAdd?id=" + arr[i].id + "')\"><i\n" +
                    "class=\"layui-icon\">&#xe642;</i>添加商品\n" +
                    "</a></td>");
            } else {
                tr.append("<td><a class=\"layui-btn layui-btn-warm layui-btn-xs\"\n" +
                    "onclick=\"xadmin.open('编辑','categoryAdd?id=" + arr[i].id + "')\"><i\n" +
                    "class=\"layui-icon\">&#xe642;</i>添加子栏目\n" +
                    "</a></td>");
            }
            if (arr[i].isLeaf === 0) {
                tr.append("<td></td>")
            } else {
                tr.append("<td><a class=\"layui-btn-danger layui-btn layui-btn-xs\"  onclick=\"member_del(this," + arr[i].id + ")\" href=\"javascript:;\" ><i class=\"layui-icon\">&#xe640;</i>删除</a></td>")
            }
            if (method === 1) {
                body.append(tr);
            } else {
                body.after(tr);
            }
            form.render();
        }
    }

    //展开
    function findMore(id) {
        $.ajax({
            type: "GET",
            url: "cate/moreCate",
            data: {
                'id': id
            },
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16})
            },
            success: function (result) {
                layer.close(loading);
                if (result.status === 0) {
                    layer.msg("此分类下没有子类！！！", {time: 1500, icon: 5, shift: 6}, function () {
                    });
                    return false;
                }
                const body = $('#tr' + id);
                appendTo(body, result.data, 2);
                $("#a" + id).removeAttr("onclick");
            }
        })
    }

    function addRootCate() {
        const name = $('#cateName').val();
        if (name === "" || name === null || name.length < 2 || name.length > 10) {
            layer.msg('名称长度在2-10之间', {time: 1500, icon: 5, shift: 6});
            return false;
        }
        let data = {'pid': 0, 'name': name};
        $.ajax({
            type: 'PUT',
            url: 'cate/cate',
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function (result) {
                layer.msg('添加成功！', {time: 1000, icon: 6, shift: 6});
                window.location.reload();
            }
        })
    }

</script>
<script>
    layui.use(['form', 'element'], function () {
        form = layui.form;

    });

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'GET',
                url: 'cate/delCate',
                data: {
                    'id': id
                },
                success: function () {
                    layer.msg('删除成功！', {time: 1000, icon: 6, shift: 6});
                }
            });
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    // 分类展开收起的分类的逻辑
    //
    $(function () {
        $("tbody.x-cate tr[fid!='0']").hide();
        // 栏目多级显示效果
        $('.x-show').click(function () {
            if ($(this).attr('status') === 'true') {
                $(this).html('&#xe625;');
                $(this).attr('status', 'false');
                cateId = $(this).parents('tr').attr('cate-id');
                $("tbody tr[fid=" + cateId + "]").show();
            } else {
                cateIds = [];
                $(this).html('&#xe623;');
                $(this).attr('status', 'true');
                cateId = $(this).parents('tr').attr('cate-id');
                getCateId(cateId);
                for (var i in cateIds) {
                    $("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('&#xe623;').attr('status', 'true');
                }
            }
        })
    });

    var cateIds = [];

    function getCateId(cateId) {
        $("tbody tr[fid=" + cateId + "]").each(function (index, el) {
            id = $(el).attr('cate-id');
            cateIds.push(id);
            getCateId(id);
        });
    }

</script>
</body>
</html>